<template>
  <div>
    <div class="mokuai1">
      <h3>何为边界处理。就是你访问main.js里面的数据</h3>
      <p>如何访问，就是直接拿就行</p>
      <p>这是从main拿到hell的内容：=》{{$hello}}</p>
    </div>
    <div class="mokuai1">
      <h3>何为边界处理。就是你访问main.js里面的数据</h3>
      <p>如何访问，就是直接拿就行</p>
      <p>这是从main拿到URL的内容：{{urldata}}</p>
    </div>
      <div class="mokuai1">
      <h3>ref使用下面</h3>
      <p ref="pdom">使用ref，这是要被读取的内容部分</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 拿到main里面的data的数据
      urldata:this.$root.lianjie
    };
  },
  //使用mounted开始读取ref的内容
  mounted(){
      console.log(this.$refs.pdom)
      this.$refs.pdom.innerHTML="原来的改为这是读取之后改变"
  }
};
</script>

<style>
.mokuai1 {
  border: 1px solid red;
  margin-bottom: 30px;
}
.colorred {
  color: red;
}
h2 {
  color: aqua;
}
h3 {
  color: brown;
}
</style>